<template>
  <div style="height: 100vh">
    <el-card style="height: 100%" class="box-card">
      <div>
        <label style="font-size: 20px; float: left" type="text">文章标题</label>
        <el-input
          v-model="title"
          placeholder="请输入标题"
          style="width: 100%; margin-top: 10px; font-size: 25px"
        ></el-input>
        <br />
        <br />
        <label style="font-size: 15px; float: left" type="text">简介</label>
        <el-input
          v-model="details"
          placeholder="请输入简介"
          type="textarea"
          autosize
          style="width: 100%; margin-top: 5px; font-size: 10px"
        ></el-input>
      </div>
      <br />
      <div ref="editor" id="aab"></div>

      <textarea
        name=""
        id=""
        style="width: 100%; display: none"
        rows="12"
        readonly
        v-model="editorData"
      ></textarea>

      <div id="image">
        <!-- 上传图片 -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:5000/FileUploadProcessing/FileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div>
        <el-select
          v-model="value"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择文章标签"
          size="medium"
          style="width: 300px; margin-top: 10px; float: left"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </div>

      <el-button type="success" @click="getContent" round style="float: right"
        >完成编辑</el-button
      >
      <!-- 模态框 -->
      <el-dialog
        class="motaikuang"
        title="是否发布"
        :visible.sync="dialogFormVisible"
      >
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
//引入组件
import E from "wangeditor";
// import $ from "jquery";
import { addArticle, getList } from "../../api/index";
export default {
  data() {
    return {
      editor: null,
      editorData: "",
      title: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      details: "",
      imgId: false,
      pager: {
        query: "a",
      },
      ArticleContent: "",

      // 分类框数据
      options: [
        {
          value: "currentEvents",
          label: "推荐",
        },
        {
          value: "currentEvents",
          label: "时事",
        },
        {
          value: "music",
          label: "音乐",
        },
        {
          value: "entertainment",
          label: "娱乐",
        },
        {
          value: "entertainment",
          label: "奥运",
        },
        {
          value: "entertainment",
          label: "其它",
        },
      ],
      value: [],

      // 上传图片
      imageUrl: "",
    };
  },
  methods: {
    getContent() {
      // 通过代码获取编辑器内容
      let content = this.editor.txt.html();
      this.dialogFormVisible = true;
      console.log(content);
      this.ArticleContent = content;

      // alert(data)
      console.log(this.options);
    },
    FetchData(pager) {
      console.log(pager);
      getList()
        .then(({ data }) => {
          console.log(data);
        })
        .catch((res) => {
          console.log(res);
        });
    },
    // 模态框取消按钮
    cancel() {
      this.dialogFormVisible = false;
    },
    determine() {
      this.dialogFormVisible = false;
      var imgId = this.imgId;
      var ArticleTypeList = this.value;

      console.log(this.ArticleContent);
      if (!this.ArticleContent.length>0) {
        //请选择封面
        this.$message.error("文章内容未填写");
        return false;
      }

      console.log(this.details.length>0);
      if (!this.details.length>0) {
        //请选择封面
        this.$message.error("文章简介未填写");
        return false;
      }

      if (!this.title.length>0) {
        //请选择封面
        this.$message.error("文章标题未填写");
        return false;
      }

      
      if (ArticleTypeList.length > 0) {
        var ArticleType = ArticleTypeList.toString();
      } else {
        //请选择种类
        this.$message.error("请选择文章种类");
        return false;
      }

      if (imgId <= 0) {
        //请选择封面
        this.$message.error("请选择文章封面");
        return false;
      }
      // console.log(ArticleType);
      var res = {
        UserId: parseInt(localStorage.getItem("userId")),
        ArticleContent: this.ArticleContent,
        ArticleDetails: this.details,
        ArticleTitle: this.title,
        ArticleType: ArticleType,
        imgId: imgId,
      };
      console.log(res);
      // console.log(res,t);
      addArticle(res)
        .then(({ data }) => {
          console.log(data);
          this.$router.push("/backstage")
        })
        .catch((res) => {
          console.log(res);
        });
    },

    // 上传图片功能的一些方法：
    handleAvatarSuccess(res, file) {
      console.log("ok");
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file);
      this.imgId = file.response.id;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      var iamge = isJPG || isPng;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return iamge && isLt2M;
    },
    handleChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);

      console.log(this.imageUrl);
    },
    handleRequest(parmas) {
      this.file = parmas.file;
    },
    submitUpload() {},
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
  mounted() {
    // this.FetchData(this.pager);
    //获取组件并构造编辑器
    this.editor = new E(this.$refs.editor);

    this.editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };

    //默认的菜单配置
    this.editor.config.menus = [
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "video", // 插入视频
      "code", // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];

    //配置历史记录
    (this.editor.config.compatibleMode = function () {
      //返回true使用兼容模式，false则是标准模式
      return true;
    }),
      //设定时间是500ms
      (this.editor.config.onchangeTimeout = 500);

    //回退100步
    this.editor.config.historyMaxSize = 100;

    //本地上传图片
    this.editor.config.uploadImgServer = "/upload-img";

    //自定义参数名
    this.editor.config.uploadFileName = "a";

    //限制图片大小为3M，默认为5M
    this.editor.config.uploadImgMaxSize = 3 * 1024 * 1024;

    //设置图片上传类型
    this.editor.config.uploadAccept = ["jpg", "png"];

    this.editor.config.debug = true;

    //创建富文本实例
    this.editor.create();
  },
};
</script>

<style>
/* .w-e-text-container{
            height: 500px !important;
} */

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.w-e-toolbar {
  flex-wrap: wrap;
}
#aab > * {
  z-index: 0 !important;
}

#image {
  float: left;
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
